<template>
  <div>
    <div id="toolbar-container" ></div>
    <div id="editor-container" :style="{height:height}"></div>
  </div>
</template>

<script>
  import '@wangeditor/editor/dist/css/style.css'
  import { createEditor, createToolbar } from '@wangeditor/editor'

  export default {
    name: "Index",
    props:{
      height:{
        type:String,
        default:"300px"
      },
      html:{
        type:String,
        default:""
      }
    },
    data() {
      return {
        editorConfig:{
          MENU_CONF: {
            uploadImage:{
              customInsert:this.update
            }
          }
        }
      }
    },
    mounted(){
      this.init();
    },
    methods: {
      init() {
        // 创建编辑器
        const editor = createEditor({
          selector: '#editor-container',
          html:this.html,
          config: {
            placeholder: '',
            //maxLength: 500,
            onChange:(editor)=>{
              this.$emit("change",{editor})
            }
          }
        })
        // 创建工具栏
        const toolbar = createToolbar({
          editor,
          selector: '#toolbar-container'
        })
        //
        editor.getConfig().MENU_CONF.uploadImage = {
            title: '上传附件',
            fieldName: 'file',
            // 超时时间，默认为 10 秒
            timeout: 100 * 1000, // 5 秒
            customUpload: this.update, // 上传方法
        };
        this.editor = editor;
        window.ss = editor;
      },
      update(file, insertFn){
        _.zipImgFile(file).then((newFile)=> {
          this.api("base.upload",{file:newFile,path:"ueditor"}).then((res)=>{
            let data = res;
            let url = decodeURIComponent(_.fileUrl(data.fileName)) //.replace(/.*\/profile/,'/profile');
            insertFn(url,file.name)
          })
        })
      }
    }
  };
</script>

<style lang="scss">
  #toolbar-container{
    border:1px solid #dddfe6;
    border-bottom:none;
  }

  #editor-container{
    border:1px solid #dddfe6;
  }
</style>

